<%--
  Created by IntelliJ IDEA.
  User: lxj
  Date: 2021/5/20
  Time: 17:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%--引入jstl标签,这个不算在线引入,在pom中还要引入依赖--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>


    <!--引入 Bootstrap  和 jquery   需要联网-->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <style>
        th{
            text-align: center;
        }
        td{
            text-align: center;
        }
    </style>

</head>
<body>
<div>
    查找的姓名为:<input type="text" id="name" ><br>
    查找的年龄是:<input type="text" id="age"><br>
    <button id="btn">提交</button>
    <h3 align="center">用户信息表</h3>



    <div style="float:left">
        <form class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">姓名</label>
                <input type="text" class="form-control" id="exampleInputName2">
            </div>
            <div class="form-group">
                <label for="exampleInputName3">籍贯</label>
                <input type="text" class="form-control" id="exampleInputName3" >
            </div>
            <div class="form-group">
                <label for="exampleInputEmail2">Email</label>
                <input type="email" class="form-control" id="exampleInputEmail2" >
            </div>
            <button type="submit" class="btn btn-default">查询</button>
        </form>
    </div>

    <div style="float:right;margin: 5px">
        <a href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
        <a href="add.html">删除选中</a>
    </div>

    <div  id="tab">

        <table border="1" class="table table-bordered table-hover"  >
            <tr class="success"  >
                <th><input type="checkbox"></th>
                <th>编号</th>
                <th>姓名</th>

                <th>年龄</th>
                <th>性别</th>
            </tr>
        </table>

    </div>

    <div>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <span style="font-size: 23px;">
                    共16条记录，共四页
                </span>
            </ul>
        </nav>
    </div>

</div>


<script>

    /*给后端要第一页的内容*/
    var dangqianye=1;

    $(function () {
        $("#btn").click(function () {//对button添加一个点击事件
            $.ajax({
                url:"http://localhost:8080/ssm/selectByNameAndAge",
                type:"post",
                data:{
                    "name":$("#name").val(),
                    "age":$("#age").val(),
                    "dangqianye":dangqianye

                },success:function (data) {
                    var str=" <table border=\"1\" class=\"table table-bordered table-hover\"   >";
                    str+=" <tr class='success' >";

                    str+=" <td><input type='checkbox'></td>" ;

                    str+="<td>"+"编号"+"</td>";
                    str+="<td>"+"姓名"+"</td>";
                    str+="<td>"+"年龄"+"</td>";
                    str+="<td>"+"性别"+"</td>";
                    str+="</tr>";

                    for (var i = 0; i < data.length; i++) {
                        var stu=data[i];
                        str+=" <tr class='success'  >";
                        str+=" <td><input type='checkbox'></td>" ;
                        str+="<td>"+stu.id+"</td>";
                        str+="<td>"+stu.name+"</td>";
                        str+="<td>"+stu.age+"</td>";
                        str+="<td>"+stu.gender+"</td>";
                        str+="</tr>";
                    }
                    str+="</table>"
                    $("#tab").html(str);
                }
            })
        })

    })
</script>
</body>
</html>